<template>
    <div class="home">
        <div class="aboveBox">
            <div class="img">
                <el-image :src="spotsinfomation.spot_img[0]"></el-image>
            </div>
            <div class="text">
                <div class="info">
                    <div>景点名称 : {{ spotsinfomation.spot_name }}</div>
                    <el-divider class="line" content-position="center"></el-divider>
                    <div>景点等级 : {{ spotsinfomation.spot_level }}</div>
                    <el-divider class="line" content-position="center"></el-divider>
                    <div>开放时间 : {{ spotsinfomation.spot_time }}</div>
                    <el-divider class="line" content-position="center"></el-divider>
                    <div>门票价格 : {{ spotsinfomation.spot_rates }}</div>
                    <el-divider class="line" content-position="center"></el-divider>
                    <div>景点地址 : {{ spotsinfomation.spot_site }}</div>
                </div>
            </div>
        </div>
        <div class="belowBox">
            <div>
                <div class="title">景点介绍</div>
                <div style="padding:0 20px;">
                    <span style="width: 100%;font-size: 20px;">
                        &emsp;&emsp;{{ spotsinfomation.spot_address }}
                    </span>
                </div>
                <div style="width: 99%;margin: 5px auto;" v-for="item in spotsinfomation.spot_img" :key="item">
                    <el-image :src="item" style="width: 100%;" lazy></el-image>
                </div>
            </div>



        </div>
        <el-backtop :right="60" :bottom="100" />
    </div>
</template>

<script>
import api from '@/api'
export default {
    data() {
        return {
            pageIndex: 1,
            pageSize: 10,
            total: 10,
            spotsID: '',
            spotsinfo: false,
            spotsinfomation: [],

        };
    },
    beforeMount() {
        this.spotsID = localStorage.spotsid
        if (this.spotsID) {
            this.spotsinfo = true;
        }
    },
    beforeRouteLeave(to, from, next) {
        localStorage.removeItem('spotsid')
        next();
    },
    mounted() {
        if (this.spotsinfo) {
            this.getSpotsList()
        }
    },
    methods: {
        async getSpotsList() {
            if (this.spotsinfo) {
                let res = await api.findSpotsByID({ _id: this.spotsID })
                if (res?.code == 200) {
                    this.spotsinfomation = res.data;

                }
            }
        },
    }
};
</script>

<style scoped>
.home {
    width: 100%;
    height: 100vh;
}

.aboveBox {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    margin: 10px 0;

}

.belowBox {
    width: 95%;
    height: 100%;
    display: flex;
    justify-content: center;
    margin: 10px auto;
}

.img {
    width: 40%;
    height: 500px;
    overflow: hidden;
    border-radius: 20px;

}

.el-image {
    width: 100%;
    height: 100%;
}

.img img {
    width: 100%;
    height: 100%;
}

.line {
    width: 93%;
    margin: auto;
    background-color: #fff;
}

.text {
    width: 50%;
    height: 500px;
    background-color: #ddd;
    border-radius: 20px;
}

.info {
    padding: 50px 20px;
}

.info div {
    margin: 25px;
    font-size: 20px;
}

.title {
    padding: 20px;
    width: 100%;
    font-size: 32px;
}
</style>